<template>
  <div class="main-card">
    <SearchBox :asList="asList" @advancedSearch="advancedSearch" />
      <TableHandler
        :tableType="tableType"
        :columns="columns"
        @setColumns="setColumns"
        @changeTableStyle="changeTableStyle"
        :tableData="tableData"
        @addMission='addMission'
      />
    <NormalTable
      :columns="columns"
      @setBatchList="setBatchList"
      @handler="handler"
      :tableData="tableData"
      :vertical="vertical"
      v-if="showTable"
    />
    
    <TablePagination @getList="getList" :total="total" />

    <!-- <AssignDialog
      ref="assignMission"
      v-if="assignFlag"
      @closeAssign="closeAssign"
    /> -->
  </div>
</template>

<script>
import SearchBox from "../components/search";
import TableHandler from "../components/tableHandle";
import NormalTable from "../components/normalTable";
import TablePagination from "../components/tablePagination";
// import AssignDialog from "./components/assignDialog";
export default {
  components: {
    SearchBox,
    TableHandler,
    NormalTable,
    TablePagination,
    // AssignDialog,
  },
  data() {
    return {
      tableType: 1,
      showTable: true,
      vertical: false,
      // 批量选中的数据
      batchList: [],
      asData: {},
      assignFlag: false,
      asList: [
        {
          placeholder1: "下单时间",
          placeholder2: "下单时间",
          type: "time",
          props: "datetimerange",
          name: "time",
          defaultTime: ["00:00:00", "23:59:59"],
          label: "创建时间",
        },
        {
          placeholder: "任务单类型",
          type: "select",
          name: "xpgroup",
          data: [
            { text: "鲜檬摄影", number: 1 },
            { text: "虎彩电商", number: 2 },
            { text: "B端影楼", number: 3 },
          ],
          label: "任务单类型",
          width: '120px'
        },
        {
          placeholder: "任务状态",
          type: "select",
          width: '120px',
          name: "PushTaskType",
          data: [
            { text: "全部", number: 1 },
            { text: "就绪", number: 2 },
            { text: "下发中", number: 3 },
            { text: "已派发", number: 4 },
            { text: "初修中", number: 5 },
            { text: "精修中", number: 6 },
            { text: "任务完成", number: 7 },
            { text: "精修完成", number: 8 },
            { text: "改片", number: 9 },
            { text: "作废", number: 10 },
          ],
          filterable: true,
          label: "任务状态",
        },
        {
          width:'250px',
          placeholder: "订单号/任务单号/手机号/客户姓名搜索",
          type: "text",
          name: "searVal",
        },
      ],
      columns: [
        {
          label: "初修任务单",
          show: true,
          prop: "orderNo",
        },
        {
          label: "创建时间",
          show: true,
          prop: "createTime",
        },
        {
          label: "客户姓名",
          show: true,
          prop: "customerName",
        },
        {
          label: "客户手机",
          show: true,
          prop: "customerPhone",
        },
        {
          label: "店家名称",
          show: true,
          prop: "storeName",
        },
        {
          label: "修片数量",
          show: true,
          prop: "retouchNum",
        },
        {
          label: "任务状态",
          show: true,
          prop: "status",
          statusList: [
            { text: "就绪", status: 2 },
            { text: "下发中", status: 3 },
            { text: "已派发", status: 4 },
            { text: "初修中", status: 5 },
            { text: "精修中", status: 6 },
            { text: "任务完成", status: 7 },
            { text: "精修完成", status: 8 },
            { text: "改片", status: 9 },
            { text: "作废", status: 10 },
          ],
        },
        {
          label: "任务单类型",
          show: true,
          prop: "missionType",
          statusList: [
            { text: "初修", status: 2 },
            { text: "精修", status: 9 },
            { text: "入册", status: 10 },
          ],
        },
        {
          label: "操作",
          show: true,
          prop: "handler",
          handlerList: [
            {
              text: "初修详情",
              command: "detail",
            }
          ],
        },
      ],
      tableData: [
        {
          orderNo:'12431824319243',
          createTime:'2021-05-30',
          customerName:'客户名称',
          customerPhone:'13728272324',
          storeName:'店家名称',
          retouchNum:'12',
          status:2,
          missionType:'2'
        },
        {
          orderNo:'12431824319243',
          createTime:'2021-05-30',
          customerName:'客户名称',
          customerPhone:'13728272324',
          storeName:'店家名称',
          retouchNum:'12',
          status:2,
          missionType:'2'
        },
        
      ],
      total: 4,
    };
  },
  methods: {
    advancedSearch(data) {
      this.asData = data;
      console.log(data, "data");
    },
    // 表格操作
    handler(item) {
      this[item.handler](item);
    },
    // 设置选中的行数
    setBatchList(list) {
      this.batchList = list;
    },
    // 设置显示的表头
    setColumns(list) {
      this.columns = JSON.parse(JSON.stringify(list));
      this.showTable = false;
      this.$nextTick(() => {
        this.showTable = true;
      });
    },
    changeTableStyle() {
      this.$nextTick(() => {
        this.vertical = !this.vertical;
        this.$forceUpdate();
      });
    },
    // 新增任务单
    addMission(){
      console.log('新增任务单')
    },
    // 分页请求数据
    getList(data) {
      console.log(data, "分页数据");
    },
    detail(data) {
      this.loadPage('premisDetail')
      // console.log({data})
      // this.$router.push({
      //   name: "missionDetail",
      //   query: {
      //     id: data.photoNum,
      //     from: this.$route.meta.isPath
      //   },
      // });
    },
    closeAssign() {
      this.assignFlag = false;
    },
  },
};
</script>

<style lang='scss' scoped>
.main-card{
    background-color: #fff;
    box-shadow: 0px 0px 10px #ccc;
    border-radius: 5px;
    padding:10px;
    padding-top: 20px;
}
.table-handle{
  height: 50px;
  background-color: #ccc;
}

</style>